<!-- 单列数据具有+ 无 el-tooltip -->
<template>
  <el-table class="jk_common_table004" style="width: 100%; height: 100%" height="style" ref="dataTable"
    :data="tableData" :class="pagesShow ? 'THeightPage' : 'THeight'" :size="size" border
    :header-cell-style="headerStyle" :cell-style="cellStyle" :row-key="rowKey" default-expand-all @row-click="rowClick"
    @selection-change="handleSelectionChange" v-loading="tableLoading">
    <template #empty>
      <div class="table-empty">
        <img src="/images/table-empty.png" alt="" />
        <p>暂无数据</p>
      </div>
    </template>
    <el-table-column v-if="selection" type="selection" width="35" />

    <el-table-column v-if="selectOne" label="选择" width="55">
      <template slot-scope="scope">
        <el-radio :label="scope.row.id" v-model="selectId">
          {{ "" }}
        </el-radio>
      </template>
    </el-table-column>

    <el-table-column v-if="showIndex" type="index" width="60" label="序号" :fixed="isFixed ? 'left' : false" />
    <template v-for="(item, index) in colsData">
      <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width ? item.width : ''"
        :align="item.align" :sortable="item.sortable">
        <template #header>
          <span v-html="item.label"></span>
        </template>

        <template v-slot="scope">
          <template v-if="item.prop === 'modelList'">
            <el-select v-model="scope.row.modelId" @change="getPointType(scope.row)" size="mini" style="width: 100%;">
              <el-option v-for="(option, index) in scope.row.modelList" :key="index" :label="option.modelName"
                :value="option.id">
              </el-option>
            </el-select>
          </template>
          <template v-else-if="item.prop === 'modelType'">
            {{ scope.row[item.prop] | dictFilter }}
          </template>
          <template v-else-if="item.prop === 'forecasttDetail'">
            <tableTooltip :data="parseStrEmpty(scope.row[item.prop])">
            </tableTooltip>
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
    </template>

    <el-table-column label="操作" v-if="actions.length > 0" width="80" :fixed="isFixed ? 'right' : false" align="center">
      <template v-slot="scope">
        <template v-for="(action, index) in actions">
          <el-button :key="index" size="mini" type="text" :icon="action.icon"
            @click.stop="actionClick(action.action, scope.row)">{{ action.name }}</el-button></template>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { parseStrEmpty } from "@/utils/ruoyi";
import tableTooltip from "@/components/TableTooltip";
export default {
  components: { tableTooltip },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableLoading: false,
    size: {
      type: String,
      defalut: "defalut",
    },
    headerStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    cellStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    colsData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    actions: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selection: {
      type: Boolean,
      defalut: false,
    },
    showIndex: {
      type: Boolean,
      default: true,
    },
    pagesShow: {
      type: Boolean,
      default: false,
    },
    pager: {
      type: Object,
      default: () => {
        return {
          total: 0,
          current: 1,
          pageSize: 25,
        };
      },
    },
    rowKey: String,
    currentEditRow: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    selectOne: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      exp: () => /^[0-9]+.?[0-9]*$/,
      currentRow: null,
      selectId: "",
      parseStrEmpty: parseStrEmpty,
    };
  },
  filters: {
    dictFilter(type) {
      if (type == "health") {
        return "基于健康度预测模型";
      } else if (type == "reliable") {
        return "基于可靠度预测模型";
      } else {
        return "";
      }
    },
  },
  watch: {
    selectId(val) {
      this.$emit("changeSelectId", val);
    },
  },
  methods: {
    rowClick(row) {
      this.$emit("rowClick", row);
    },
    handleSelectionChange(rows) {
      this.$emit("handleSelectionChange", rows);
    },
    handleCurrentChange(val) {
      this.$emit("paginationChangeCur", val);
    },
    isNumber(val) {
      if (!val) return false;
      return this.exp.test(val);
    },
    actionClick(actionType, row) {
      if (actionType == "delete") {
        let tmp = this.tableData.indexOf(row);
        if (tmp > -1) {
          this.tableData.splice(tmp, 1);
        }
      }
    },
    getPointType(row) {
      console.log(row);
      var tmp = row.modelList.find((item) => item.id == row.modelId);
      if (tmp) {
        row.modelType = tmp.modelType;
        row.modelTime = tmp.createTime;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.common-table {
  height: 100%;
}

::v-deep .el-table__body-wrapper {
  height: 454px !important;
}
</style>
